<template>
  <div>
    <Header></Header>
    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card" style="margin-top: 24px; border: 0px" shadow="never">
          <div class="block">
            <el-row>
              <el-col :span="3" @click="uploadAvatarDialog = true">
                <a @click="uploadAvatarDialog = true"
                  ><el-avatar :size="90" :src="avatar"></el-avatar
                ></a>
              </el-col>
              <el-col :span="13">
                <div style="user-select: none">
                  <p style="font-size: 20px">{{ username }}</p>
                  <p style="font-size: 14px; color: #bfc4cd; margin-top: 10px">
                    {{ description }}
                  </p>
                  <p style="font-size: 14px; margin-top: 10px">{{ email }}</p>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button
                  @click="drawer = true"
                  v-if="ownInfo"
                  size="mini"
                  type="warning"
                  style="float: right; margin-right: 20px"
                >
                  我的关注
                </el-button>
              </el-col>
              <el-col :span="4">
                <el-button
                  size="mini"
                  type="primary"
                  v-if="ownInfo"
                  @click="centerDialogVisible = true"
                  >修改信息</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  v-if="!ownInfo"
                  @click="followPost"
                  >{{ followTitle }}</el-button
                >
              </el-col>
            </el-row>
          </div>
          <el-tabs tab-position="top" style="margin-top: 24px">
            <el-tab-pane :label="ownInfo ? '我的文章' : '他的文章'">
              <RecentPost />
            </el-tab-pane>
            <el-tab-pane label="最近动态">
              <Logs />
            </el-tab-pane>
            <el-tab-pane :label="ownInfo ? '我的收藏' : '他的收藏'">
              <Collection />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
    </el-row>

    <el-dialog
      title="修改头像"
      :visible.sync="uploadAvatarDialog"
      width="20%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="refreshAvatar"
      :destroy-on-close="true"
    >
      <UploadAvatar />
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary">修 改</el-button>
      </span> -->
    </el-dialog>

    <el-dialog
      title="修改个人信息"
      :visible.sync="centerDialogVisible"
      width="20%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        id="sign-form"
        label-position="right"
        label-width="100px"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        style="display: block"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="个人介绍" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">修 改</el-button>
      </span>
    </el-dialog>
    <el-drawer :visible.sync="drawer" :with-header="false">
      <Follower />
    </el-drawer>
  </div>
</template>

<script>
import Header from "../components/Header";
import RecentPost from "../components/RecentPost";
import Logs from "../components/Logs";
import Collection from "../components/Collection";
import Follower from "../components/Follower";
import UploadAvatar from "../components/UploadAvatar";

export default {
  name: "Home.vue",
  components: { Header, RecentPost, Logs, Collection, Follower, UploadAvatar },
  data() {
    return {
      uid: "1", // 访问对象的id
      avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 访问对象的头像
      username: "", // 访问对象的用户名
      description: "", // 访问对象的描述信息
      email: "", // 访问对象的Email
      ownInfo: false, // 是否是自己的主页
      centerDialogVisible: false,
      uploadAvatarDialog: false,
      ruleForm: {
        username: "",
        email: "",
        description: "",
      },
      followTitle: "关注",
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
        description: [
          { required: true, message: "请输入个人介绍", trigger: "blur" },
          { max: 30, message: "长度小于 30 个字符", trigger: "blur" },
        ],
      },
      drawer: false, // 关注列表抽屉
    };
  },
  methods: {
    findUser(uid) {
      const _this = this;
      _this.$axios.get("/user/" + uid).then((res) => {
        _this.avatar = res.data.data.avatar;
        _this.username = res.data.data.username;
        _this.description = res.data.data.description;
        _this.email = res.data.data.email;
        _this.ruleForm.username = _this.username;
        _this.ruleForm.email = _this.email;
        _this.ruleForm.description = _this.description;
      });
    },
    followPost() {
      const _this = this;
      // 未登录直接return
      if (sessionStorage.getItem("userInfo") == "{}")
        return _this.$message.error("请先登录");
      // 1. 准备好对方的uid
      _this.$axios
        .post("/follow/post/" + _this.uid, null, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // 请求成功
          if (res.data.code == 200) {
            if (res.data.msg == "关注成功") {
              _this.followTitle = "取消关注";
            } else {
              _this.followTitle = "关注";
            }
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          console.log(this.ruleForm);
          // 修改个人信息
          this.$axios
            .post("/user/modifyInfo", this.ruleForm, {
              headers: {
                Authorization: localStorage.getItem("token"),
              },
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.code == 200) {
                this.$message.success(res.data.msg, { duration: 3 * 1000 });
                _this.$store.commit("SET_USERINFO", res.data.data);
                _this.email = res.data.data.email;
                _this.description = res.data.data.description;
              }
            });

          this.centerDialogVisible = false;
        } else {
          console.log("error submit!!");
          // this.$store.commit("REMOVE_INFO");
          return false;
        }
      });
    },
    refreshAvatar() {
      this.avatar = this.$store.getters.getUser.avatar;
    },
  },
  created() {
    const _this = this;
    // 防止获取不到信息报错
    console.log(sessionStorage.getItem("userInfo"));
    if (
      sessionStorage.getItem("userInfo") == null ||
      sessionStorage.getItem("userInfo") == "{}"
    ) {
      _this.$store.commit("SET_USERINFO", {});
    }

    // uid 访问对象的id
    _this.uid = _this.$route.params.id;
    // 表示未登录用户进行查询主页
    if (sessionStorage.getItem("userInfo") == "{}") console.log("当前未登录");
    else {
      console.log("当前已登录");
      _this.ownInfo = _this.uid == _this.$store.getters.getUser.id;
      if (localStorage.getItem("token")) {
        // 查询
        _this.$axios
          .get("/follow/get/" + _this.uid, {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              _this.followTitle = res.data.msg;
            }
          });
      }
    }
    _this.findUser(_this.uid);
  },
};
</script>
<style scoped>
/deep/ :focus {
  outline: 0;
}
</style>
<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
/* 修改tab的样式一定要删除style标签后的scoped */
.el-tabs__item {
  font-size: 20px !important;
  font-weight: 900 !important;
}
</style>
